// 基础色值
$black: #4e5969;
$white: #fff;

$gray-1: var(--v-bg);
$gray-2: #f2f3f5;
$gray-3: #e5e6eb;
$gray-4: #a9aeb8;
$gray-5: #86909c;
$gray-6: var(--v-gray);
$gray-7: #4e5969;
$gray-8: #272e3b;

// 背景色
$background-color: $gray-1;
$background-color-light: $white;

// 主题色
$primary: #5372e3;
$primary-light: #ecf5ff;
$primary-dark: #2b85e4;
$primary-disabled: #a0cfff;

// 信息色
$info: #909399;
$info-light: #f4f4f5;
$info-dark: #82848a;
$info-disabled: #c8c9cc;

// 警告色
$warning: #ff976a;
$warning-light: #fcf4e5;
$warning-dark: #df9220;
$warning-disabled: #fbdd95;

// 成功色
$success: #07c160;
$success-light: #dbf1e1;
$success-dark: #18b566;
$success-disabled: #71d5a1;

// 危险色
$danger: #ee0a24;
$danger-light: #fef0f0;
$danger-dark: #dd6161;
$danger-disabled: #fab6b6;

// 文字颜色
$text-color: $gray-8;
$text-color-2: $gray-6;
$text-color-3: $gray-5;
$content-color: $gray-7;
$tips-color: $gray-6;
$light-color: $gray-5;
$placeholder-color: $gray-5;
$active-color: $gray-2;
$hover-color: $gray-2;
$disabled-color: $gray-5;

// 边框颜色
$border-color: $gray-3;
$border-color-light: $gray-2;

// 字体
$base-font-family: 'Open Sans',
-apple-system,
BlinkMacSystemFont,
'Helvetica Neue',
Helvetica,
Segoe UI,
Arial,
Roboto,
'PingFang SC',
'miui',
'Hiragino Sans GB',
'Microsoft Yahei',
sans-serif;

// 文字大小
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 18px;

// 文字粗细
$font-weight-bold: 500;

// 文字行高
$line-height-xs: 1.2;
$line-height-sm: 1.4;
$line-height-md: 1.6;
$line-height-lg: 1.8;

// 透明度
$active-opacity: .7;
$hover-opacity: .7;
$loading-opacity: 1;
$disabled-opacity: .5;

// 内边距
$padding-base: 8px;
$padding-xs: $padding-base * 2;
$padding-sm: $padding-base * 3;
$padding-md: $padding-base * 4;
$padding-lg: $padding-base * 6;
$padding-xl: $padding-base * 8;

// 边框宽度
$border-width-base: 1px;

// 圆角
$border-radius-sm: 4rpx;
$border-radius-md: 8rpx;
$border-radius-lg: 16rpx;
$border-radius-max: 9999px;

// 组件变量
$dialog-width: 540rpx;
$dialog-border-radius: 16rpx;
$dialog-background: $white;
$dialog-header-font-size: 36rpx;
$dialog-header-font-weight: 500;
$dialog-header-padding: 30rpx 30rpx 20rpx;
$dialog-header-color: $text-color;
$dialog-message-font-size: 30rpx;
$dialog-message-line-height: 1.5;
$dialog-message-max-height: 60vh;
$dialog-message-padding: 0 30rpx 30rpx;
$dialog-message-color: $text-color-2;
$dialog-border-color: $border-color;
$dialog-action-font-size: 32rpx;
$dialog-action-font-weight: 500;
$dialog-action-height: 100rpx;
$dialog-action-cancel-color: $text-color-3;
$dialog-action-confirm-color: $primary;

$empty-padding: 60rpx 0;
$empty-img-width: 240rpx;
$empty-img-height: 240rpx;
$empty-text-font-size: 28rpx;
$empty-text-color: $text-color-3;

$loading-size: 32rpx;
$loading-color: $primary;

$nav-bar-font-size: 32rpx;
$nav-bar-color: $text-color;
$nav-bar-border-color: $border-color;
$nav-bar-background: $white;
$nav-bar-title-font-size: 36rpx;
$nav-bar-back-icon-size: 20px;
$nav-bar-zindex: 1000;

// 阴影
$box-shadow-base: 0 4rpx 8rpx rgba($black, .12),
0 0 12rpx rgba($black, .04);
$box-shadow-dark: 0 4rpx 8rpx rgba($black, .12),
0 0 12rpx rgba($black, .12);
$box-shadow-light: 0 4rpx 24rpx 0 rgba($black, .1);

// 动画
$animation-duration-base: .3s;
$animation-duration-fast: .2s;
$animate-timing-function-enter: ease-out;
$animate-timing-function-leave: ease-in;
$loading-animation-duration: 1.2s;

// 按钮变量
$button-border-color: $border-color;
$button-border-radius: $border-radius-md;

// 弹出层变量
$popup-mask-opacity: 0.5;
$popup-zindex: 1001;

// Tabbar变量
$tabbar-zindex: 100;
$tabbar-border-color: $border-color;

// 按钮变量
$button-border-width: $border-width-base;

// 弹出层变量
$popup-close-size: 20px;
$popup-close-color: $text-color;

// 按钮变量
$button-loading-size: 16px;

// Tabbar变量
$tabbar-background: $white;
$tabbar-height: 50px;

// 按钮变量
$button-icon-size: 18px;
$button-hover-mask-opacity: $hover-opacity;
$button-plain-hover-mask-opacity: $hover-opacity;
$button-default-color: $text-color;
$button-default-border-color: $border-color;

// Tabbar变量
$tabbar-item-mid-button-icon-top: -10px;

// Tabbar变量
$tabbar-item-color: $text-color;

// Tabbar变量
$tabbar-item-padding: 0 4px;

// Tabbar变量
$tabbar-item-font-size: 12px;
$tabbar-item-mid-button-circle-size: 40px;

// 按钮变量
$button-default-background: $white;
$button-primary-color: $white;

// Tabbar变量
$tabbar-box-shadow: $box-shadow-base;

// 弹出层变量
$popup-round-border-radius: $border-radius-lg;
$button-border-width: $border-width-base;
$button-border-color: $border-color;
$button-border-radius: $border-radius-sm;
$button-round-border-radius: $border-radius-max;
$button-loading-size: 36rpx;
$button-icon-size: 1.2em;
$button-circle-padding: 10rpx;
$button-hover-mask-opacity: .1;
$button-plain-hover-mask-opacity: .05;

$button-default-color: $text-color;
$button-default-background: $background-color-light;
$button-default-border-color: $border-color;

$button-info-color: $white;
$button-info-background: $info;
$button-info-border-color: $info;
$button-info-plain-color: $info;
$button-info-plain-background: $background-color-light;

$button-primary-color: $white;
$button-primary-background: var(--v-linear);
$button-primary-border-color: $primary;
$button-primary-plain-color: $primary;
$button-primary-plain-background: $background-color-light;

$button-success-color: $white;
$button-success-background: $success;
$button-success-border-color: $success;
$button-success-plain-color: $success;
$button-success-plain-background: $background-color-light;

$button-warning-color: $white;
$button-warning-background: $warning;
$button-warning-border-color: $warning;
$button-warning-plain-color: $warning;
$button-warning-plain-background: $background-color-light;

$button-danger-color: $white;
$button-danger-background: $danger;
$button-danger-border-color: $danger;
$button-danger-plain-color: $danger;
$button-danger-plain-background: $background-color-light;

// Button 尺寸配置
$button-normal-height: 88rpx;
$button-normal-padding: 0 30rpx;
$button-normal-font-size: $font-size-md;

$button-mini-height: 48rpx;
$button-mini-padding: 0 $padding-base;
$button-mini-font-size: $font-size-xs;

$button-small-height: 64rpx;
$button-small-padding: 0 $padding-xs;
$button-small-font-size: $font-size-sm;

$button-large-height: 100rpx;
$button-large-padding: 0 30rpx;
$button-large-font-size: $font-size-lg;
$tabbar-height: 100rpx;
$tabbar-zindex: 99;
$tabbar-background: $background-color-light;
$tabbar-item-font-size: 22rpx;
$tabbar-item-padding: 14rpx 0;
$tabbar-item-color: $gray-6;
$tabbar-item-active-color: $primary;
$tabbar-item-icon-size: 42rpx;
$tabbar-item-mid-button-circle-size: 100rpx;
$tabbar-item-mid-button-icon-size: 70rpx;
$tabbar-item-mid-button-icon-top: 14rpx;
$tabbar-border-color: $border-color;
$tabbar-box-shadow: $box-shadow-light;
$image-placeholder-font-size: $font-size-md;
$image-placeholder-text-color: $gray-6;
$image-placeholder-background: $background-color;
$image-loading-icon-size: 64rpx;
$image-loading-icon-color: $gray-4;
$image-error-icon-size: 64rpx;
$image-error-icon-color: $gray-4;